<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
</head>
<body>
    <div class="talk_con">
		<div class="talk_input" id="loginDiv">
			<input type="text" class="talk_word" id="userName">
            <input type="button" value="登录" class="talk_sub" id="login" onclick="login()">
		</div>
        <div class="talk_show" id="words"></div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub" onclick="sendData()">
        </div>
    </div>
</body>
 <script type="text/javascript">      
		var ip ="127.0.0.1:18080";
		var  loginDivStr = document.getElementById("loginDiv").innerHTML;
		var Words = document.getElementById("words");
		var Who = document.getElementById("who");
		var TalkWords = document.getElementById("talkwords");
		var TalkSub = document.getElementById("talksub");
		var UserInput = document.getElementById('userName');
		function sendData(){
			if(TalkWords.value == ""){
				return;
			}
			sendToWsData(TalkWords.value, who.value);
			showMsg(1, TalkWords.value);
		}
		function showMsg(type, value, from){
			var str = "";
			if(type == 0){
				str = '<div class="atalk"><span>'+from+'说 :' + value +'</span></div>';
			}else{
				str = '<div class="btalk"><span>'+UserInput.value+'说 :' + value +'</span></div>' ;  
			}

			//Words.innerHTML = Words.innerHTML + str;
			Words.insertAdjacentHTML("beforeend", str);
			Words.scrollTop = Words.scrollHeight;
		}
		
		var nowUserArray=[];
		
		var es = new EventSource("http://"+ip+"/sse/randomNumbers");
		es.addEventListener("random", function(e){
			var jsonarray = eval('('+e.data+')');
			console.log(e);
			var sel = '';
			for(var i=0;i<jsonarray.length;i++){
				if(nowUserArray.indexOf(jsonarray[i]) < 0){
					sel= '<option value="'+jsonarray[i]+'">'+jsonarray[i]+'</option>';
					Who.insertAdjacentHTML("beforeend", sel);
					nowUserArray.push(jsonarray[i]);
				}
				
			} 
			
			//nowUserArray = jsonarray;
		},false);
		
		var ws = null;
		function sendToWsData(text, to){
			var msg = {};
			msg["from"]=UserInput.value;
			msg["to"]=to;
			msg["msg"]=text;
			ws.send(JSON.stringify(msg));
		}
		function login(){
		  var userName = document.getElementById('userName').value;
			if(userName== ""){
				alert("输入用户名");	
				return;
			}
			 ws = new WebSocket("ws://"+ip+"/echo");
		   ws.onopen = function()
		   {
				showMsg(0,"open", "server");  
				ws.send("name:"+userName);
				document.getElementById("loginDiv").innerHTML = userName;
		   };
			
		   ws.onmessage = function (evt) 
		   { 
			  var received_msg = evt.data;
			  var msg = JSON.parse(received_msg);
			  showMsg(0,msg["msg"], msg["from"]);
		   };
			
		   ws.onclose = function(e)
		   { 
				// 关闭 websocket
				showMsg(0,"连接已关闭..."); 
				console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
				console.log(e);
				document.getElementById("loginDiv").innerHTML =loginDivStr;
		   };
		   ws.onerror = function(e){
				console.log(e)
		   }
		}
</script>
<style type="text/css">
        .talk_con{
            width:600px;
            height:550px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 10px;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
			height: 30px;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
</html>
